<template>
  <RouterView v-if="isMobile" />
  <el-container v-else class="layout-container">
    <el-header>
      <Header />
    </el-header>
    <el-container class="container">
      <el-scrollbar style="width: 100%">
        <RouterView />
      </el-scrollbar>
    </el-container>
  </el-container>
</template>

<script setup>
import { onMounted, ref, onBeforeMount } from "vue";
import { RouterLink, RouterView } from "vue-router";
import Header from "./components/Header.vue";
import { apiAddVisitor, apiGetCsrf } from "./apis/loginApi";
import { useRouter } from "vue-router";
const router = useRouter();
const isMobile = ref(false)
onBeforeMount(() => {
  const screenWidth =
    window.innerWidth ||
    document.documentElement.clientWidth ||
    document.body.clientWidth;
  isMobile.value = screenWidth < 768;
  isMobile.value && router.replace('mobileHome');
})
onMounted(() => {
  if (!sessionStorage.getItem('userId')) {
    //记录访问数量
    apiAddVisitor().then((res) => {
      if (res.code > 0 && !isMobile) {
        ElMessage({
          message: "欢迎使用贸大实习信息平台！",
          type: "success",
        });
      }
    });
  }
  apiGetCsrf();
});
</script>

<style scoped>
.el-header {
  text-align: right;
  height: 10vh;
  background-color: #409eff;
}

.container {
  width: 100%;
  /* padding-bottom: 20px; */
  background-color: #f2f4f7;
  height: 90vh;
}
</style>
